<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>子元素过滤选择器</title>
		<!--   引入jQuery -->
		<script src="../../scripts/jquery-1.3.1.js" type="text/javascript" />
		</script>
		<script src="../../scripts/assist.js" type="text/javascript" />
		</script>
		<link rel="stylesheet" type="text/css" href="../../styles/selectstyle.css" />
		<script type="text/javascript">
			$(document).ready(function() {
				//选取每个class为one的div父元素下的第2个子元素.
				$('#btn1').click(function() {
					$("div.one :nth-child(2)").css("background", "#bfa")
				})
				//选取每个class为one的div父元素下的第一个子元素.
				$('#btn2').click(function() {
					$("div.one :first-child").css("background", "#bfa")
				})
				//选取每个class为one的div父元素下的最后一个子元素.
				$('#btn3').click(function() {
					$("div.one :last-child").css("background", "#bfa")
				})
				//如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素.
				$('#btn4').click(function() {
					$("div.one :only-child").css("background", "#bfa")
				})
			});
		</script>
	</head>
	<body>
		<button id="reset">手动重置页面元素</button>
		<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label>

		<h3>子元素过滤选择器.</h3>
		<input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1" />
		<input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2" />
		<input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3" />
		<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4" />
		<br /><br />
		<!-- 测试的元素 -->
		<div class="one" id="one">
			id为one,class为one的div（女警）
			<div class="mini">class为mini的div（曙光）</div>
		</div>

		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div（金克斯）
			<div class="mini" title="other">class为mini,title为other的div（宝石）</div>
			<div class="mini" title="test">class为mini,title为test的div（璐璐）</div>
		</div>

		<div class="one">
			class为one的div（EZ）
			<div class="mini">class为mini的div（琴女）</div>
			<div class="mini">class为mini的div（众星之子）</div>
			<div class="mini">class为mini的div（唤潮鲛姬）</div>
			<div class="mini">class为mini的div（牛头）</div>
		</div>

		<div class="one">
			class为one的div（奥巴马）
			<div class="mini">class为mini的div（凤女）</div>
			<div class="mini">class为mini的div（机器人）</div>
			<div class="mini">class为mini的div（狗熊）</div>
			<div class="mini" title="tesst">class为mini,title为tesst的div（雪人）</div>
		</div>

		<div style="display:none;" class="none">
			style的display为"none"的div（VN）
		</div>

		<div class="hide">
			class为"hide"的div（螃蟹）
		</div>

		<div>
			包含input的type为"hidden"的div（飞机）
			<input type="hidden" size="8" />
		</div>

		<span id="mover">正在执行动画的span元素.</span>
	</body>
</html>
